嗨大家好，歡迎回到我們 SVG 的奇幻旅程上。相信大家在經過昨天探險之後，一定都對 SVG 有了解了吧？不過就像大海上的冰山一樣，SVG 還遠遠不止這樣呢，那麼今天我們就一起來深入不淺出的 SVG 大探險吧！
首先我們來認識一下 SVG 檔案的基礎繪製原理，以及其包含了哪些向量圖形吧！
在 svg tag 中涵蓋了：
在 SVG 解析為 XML 時，為了符和 xml-name 中的命名原則，必須提供 SVG 命名聲明，以便將所有的 SVG 標籤辨識為屬於 SVG 的命名空間。
而當我們在使用 HTMl 語法時，HTML 會自動解析並提供 SVG 的名稱空間。
<html>
<svg viewBox =“ 0 0 100 100”>
<circe cx =“ 50” cy =“ 50” r =“ 50” fill =“ green”>
</ svg>
</ html>
如上面範例，在 HTML 內我們不需要特別聲明 SVG 名稱，便會自動解析 SVG 元素。
在 SVG 中我們使用的是網格座標系統，大約和 Canvas 差不多(其實大部分所有電腦繪圖都差不多)。
我們以頁面左上角作為 [0,0] 座標原點，座標單位為 px(像素)，X軸正整數為向右移動，Y軸正整數為向下移動。
SVG 中的所有座標單位都可以使用或不使用 單位標示符 來指定單位。也就是說 若我們設一個數值 「25」，該值會自動被轉換為使用者設備的單位值。
<text font-size="50">Text size is 50 user units</text>
上面的範例中，我們給予 font-size: 50，其結果會自動被轉換為使用者設備的單位，該單位通常會是 px(像素)。
以下介紹 SVG 如何處理各種單位符：
em 和 ex 都是相對於當前使用者設備的 font-size 以及 line-height。5px 等於 5。transfrom 或 viewBox 針對座標系統的屬性轉換。1px 對應到 0.2822222mm(即 90dpi)，在 SVG 內都會按照該比例縮放處理<svg width="200" height="200" viewBox="0 0 100 100">
我先定義了一個 SVG 畫布大小為 200x200px 但是，viewBox 定義了畫布上可顯示區域，從 [0,0]座標原點像 X軸、Y軸 延伸 100x100 的區域，這 100x100 的區域會被按照倍數比例放大到 200x200 的畫布上。因此形狀選染出來的畫面為放大了兩倍。
在 SVG 中我們可以透過直接下語法的方式指定我們要繪製的圖形。
rect 語法用來建立矩形形狀，他有六個基本屬性來設定圖形定位與樣式。
| 屬性 | 介紹 |
|---|---|
| x | 矩形上由左上角開始的 X軸 座標 |
| y | 矩形上由左上角開始的 Y軸 座標 |
| width | 矩形的寬度 |
| height | 矩形的高度 |
| rx | 圓角的 X軸 半徑 |
| ry | 圓角的 Y軸 半徑 |
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
circle 語法用來建立圓形形狀，他有三個基本屬性來設定圖形定位與樣式。
| 屬性 | 介紹 |
|---|---|
| r | 圓形半徑 |
| cx | 圓心的 X軸 座標 |
| cy | 圓心的 Y軸 座標 |
<circle cx="25" cy="75" r="20"/>
ellipse 語法用來建立橢圓形形狀，橢圓形其實就是圓形的變形，在 SVG 內我們透過改變 Ｘ軸 和 Y軸 來區分它們。
| 屬性 | 介紹 |
|---|---|
| rx | 橢圓形 X軸 半徑 |
| ry | 橢圓形 Y軸 半徑 |
| cx | 圓心的 X軸 座標 |
| cy | 圓心的 Y軸 座標 |
<ellipse cx="75" cy="75" rx="20" ry="5"/>
line 語法用來建立線段形狀，在屬性中設定座標起點跟終點，構成兩點之間的線段。
| 屬性 | 介紹 |
|---|---|
| x1 | 起始點的 X軸 座標 |
| y1 | 起始點的 Y軸 座標 |
| x2 | 終點的 X軸 座標 |
| y2 | 終點的 Y軸 座標 |
<line x1="10" x2="50" y1="110" y2="150"/>
polyline 語法用來建立一組連續的線段形狀，在每一個線段上的點皆寫在同一個屬性。
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />
polyline 語法為透過折線形狀繪製一個封閉線段圖形，這邊特邊要提的是，矩形也是一種多邊形，若有需要也可以使用 polygon 來繪製矩形。
<polygon points="200,10 250,190 160,210" />
path 語法用來建立任意形狀，甚至可以繪製一些貝茲曲線等圖形，path 語法非常強大與複雜，作者寫到這邊 SAN 值已經先掉一半了，所以在這邊簡單介紹一下 path 語法。
| 屬性 | 介紹 |
|---|---|
| d | 路徑數據，定義了該如何繪製形狀輪廓 |
| MoveTo | 設定每一次當下的座標點(M) |
| lineTo | 從當下的座標點到下一個座標點繪製直線(L) |
| horizontal lineto | 水平線段(H) |
| vertical lineto | 垂直線段(V) |
| curveto | 從起點到終點座標位置繪製 一個 貝茲曲線( C ) |
| smooth curveto | 類似 curveto，但是在 C 貝茲曲線後方再新增一個 S 的終點，而在 C 與 S 之間的節點為上一個控制點的反射座標位置。(S) |
| elliptical Arc | 橢圓弧型(A) |
| closepath | 閉合圖形的節點(Z) |
<path d="M10 10 C140 140,160 140,300 10" stroke="black" stroke-width="3" fill="none">
若是想要了解更詳細的 path 相關語法，歡迎到文章下方的參考連結，找到 W3.org 的官方文件去查詢喔～
今天的 SVG 介紹就到這邊。
學習到這邊，不知道大家有沒有一個感想是：「哇啊哈哈哈！！我還是去學習 illustrator 好啦～～ 在畫布上用鋼筆工具繪圖多快樂啊～～～」
威～～ 不能放棄啊夥伴！我們還沒有找到傳說中的大密寶呢！！
那麼明後天會再繼續講解如何繪製 SVG 圖案，以及一些 SVG 動畫原理，大家記得吃飽睡好，再一起來學習呦～
我們明天見！
iThome鐵人賽
看影片追技術